<!DOCTYPE html>
<html  style="height: 100%;">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>刘源工作室数据可视化管理驾驶舱V1</title>
	<link rel="stylesheet" type="text/css" th:href="@{/css/index_1.css}"/>
	<script src="@{./js/echarts.min.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{./js/highcharts.js}"></script>
	<script th:src="@{./js/highcharts-3d.js}"></script>
</head>

<body style="height: 100%;">
<div id="index_box">
	<div class="index_header">
		<div class="h_right">
			<div id="num" class="name">工作室团队人数：33人</div>
			<div id="ye" class="year">
				<span>📅统计年份：</span>
				<span class="Years"></span>
				<span>年</span>
			</div>
			<div id="ti" class="time">
				<span>🕔系统日期：</span>
				<span class="date"></span>
				<span class="week"></span>
			</div>
		</div>
		<div class="h_left">
			<p class="h1">刘源工作室数据可视化管理驾驶舱V1</p>
			<p class="h2">Liu Yuan Studio Data Visualization Management Cockpit V1</p>
		</div>
		<div class="h_image">

		</div>
	</div>
	<div class="layout">
		<!-- 左侧列 -->
		<div class="column left-column">
			<div class="box">
				<div class="box-header">
					<div class="responsive-img" > </div>
					<div class="h1">团队职业等级</div>

				</div>
				<div class="box-header">
					<div class="h2">Team Professional Level</div>
				</div>
				<div id="value-chart" class="chart-container"></div>

			</div>
			<div class="box">
				<div class="box-header">
					<div class="responsive-img" > </div>
					<div class="h1">团队年龄分布</div>
				</div>
				<div class="box-header">
					<div class="h2">Age distribution of the team</div>
				</div>
				<div id="chart-Funnel" class="chart-container"></div>
			</div>
			<div class="box">
				<div class="box-header">
					<div class="responsive-img" > </div>
					<div class="h1">工作室荣耀榜</div>
				</div>
				<div class="box-header">
					<div class="h2">Studio Honor Roll</div>
				</div>
<!--				<div id="award-chart" class="chart-container"></div>-->
				<div class="legend">
					<div class="legend-item">
						<div class="legend-color blue"></div>
						<span>竞赛获奖</span>
					</div>
					<div class="legend-item">
						<div class="legend-color blue2"></div>
						<span>所获荣誉</span>
					</div>
				</div>

				<svg id="chartSvg" width="100%" height="100%">
					<!-- X轴、柱子、图例都在此动态生成 -->
				</svg>
			</div>
		</div>

		<!-- 中间列 -->
		<div class="column middle-column">
			<div class="box">
				<div class="box-header">
					<div class="responsive-img" > </div>
					<div class="h1">年度重点项目进度监控</div>
				</div>
				<div class="box-header">
					<div class="h2">Annual Key Project Progress Monitoring</div>
				</div>
				<div class="box-percentage">
					<div class="chart-percentage">
						<div id="technologychart" class="chart-container"></div>
					</div>
					<div class="chart-percentage">
						<div id="competitionchart" class="chart-container"></div>
					</div>
					<div class="chart-percentage">
						<div id="publicizechart" class="chart-container"></div>
					</div>
				</div>
				<div class="box-card" id="cardContainer"></div>

			</div>
			<div class="box">
				<div class="box-header">
					<div class="responsive-img" > </div>
					<div class="h1">年度培训人次</div>
				</div>
				<div class="box-header">
					<div class="h2">Annual number of trainees</div>
				</div>
				<div id="training-chart" class="chart-container"></div>


			</div>
		</div>

		<!-- 右侧列 -->
		<div class="column right-column">
			<div class="box">
				<div class="box-header">
					<div class="responsive-img" > </div>
					<div class="h1">宣传实时数据统计</div>
				</div>
				<div class="box-header">
					<div class="h2">Real-time data statistics for promotion</div>
				</div>
				<div id="promotion-chart" class="chart-container"></div>
			</div>
			<div class="box">
				<div class="box-header">
					<div class="responsive-img" > </div>
					<div class="h1">年度价值创造(万元)</div>
				</div>
				<div class="box-header">
					<div class="h2">Annual value creation (10000 yuan)</div>
				</div>
				<div id="economic-chart" class="chart-container"></div>
			</div>
		</div>
	</div>


</div>
<script th:src="@{js/index.js}" type="text/javascript" charset="utf-8"></script>

</body>
</html>
